<template>
<div class="pie">
    <div ref="chart" class="chart"></div>
</div>
</template>

<script>

import echarts from '@/lib/echarts'
import { getElementSize } from '@/lib/util'
export default {
    name: 'Pie1Chart',
    props: {
        data: {type: Array, default: () => {return []}},
        unit: {type: String, default: ''},
        title: {type: String, default: ''},
        name: {type: String, default: ''},
        names:{type:Array, default: () => []},
         position: {type: String, default: 'right'} //饼图位置
    },
    data() {
        return {
            chart: null, //echart图表对象
            size: {width: 100, height: 100},
            sum: 0,
        }
    },
    watch: {
        '$store.state.windowResizeState' () { //监听浏览器窗口变化
            this.reDraw()
        },
        'data' () {
             this.reDraw()
        }
    },
    mounted() {
        const that = this
        that.init()
    },
    methods: {
        init () {   //实例化图表
            const that = this
            if(!that.data.length) {
                return
            }
            that.size = getElementSize(that.$refs.chart)
            // that.size = getElementSize(that.$el)
            if(!that.chart) {
                that.chart = echarts.init(that.$refs.chart,false,that.size)
            }
            that.sum = 0
            
            const rm = that.$store.state.windowSize.rm
            
            const option = {
                color: [ '#4bd8b5', '#ff8080', '#ffd342', '#1981c9', '#0463de', '#70e7ef',"#67E0E3", "#9FE6B8", "#ff9f7f", "#fb7293", "#E062AE", "#E690D1", "#e7bcf3", "#9d96f5", "#8378EA", "#96BFFF"],
                grid: {
                    top: rm, left: 2*rm, right: 2*rm, bottom: rm, containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(data) {
                        //name , value, percent, seriesName
                        let str = '<div style="background-color:#32C5E9;border-radius: 4px;"><div style="padding:5px 10px;">' + data.name + '：' + data.value + that.unit + '</div><div style="padding:5px 10px;">占比：' + data.percent + '%</div></div>'
                        return str
                    },
                    backgroundColor: 'rgba(0, 168, 255, 0)',
                    textStyle: {
                        fontSize: 1.4 * rm
                    },
                    confine: true,
                },
                legend:{
                    orient: 'vertical',
                    top: 'middle',
                    left: '10px',
                    data: this.names,
                    textStyle:{
                        color: '#fff',      
                        fontSize:12
                    }
                },
                series: [{
                    name: that.name? that.name : '数值',
                    type: 'pie',
                    
                    minAngle: 20, //最小的扇区角度（0 ~ 360）
                    data: that.data,
                    label: { show: false },
                    labelLine: { show: false },
                    emphasis: {
                        label: { show: false },
                    },
                }]
            }
            that.chart.setOption(option, true)
        },
        reDraw () { //重绘图表
            const that = this
            if(that.chart) {
                that.size = getElementSize(that.$refs.chart)
                const rm = that.$store.state.windowSize.rm
                const option = {
                    grid: {
                        top: rm, left: 2*rm, right: 2*rm, bottom: rm
                    },
                    tooltip: {
                        textStyle: {
                            fontSize: 1.4 * rm
                        },
                    },
                    series: [{
                        // center: center,
                        label: {
                            lineHeight: rm * 2,
                        },
                    }]
                }
                that.chart.setOption(option)
                that.chart.resize(that.size)
            }else {
                that.init()
            }
        },
    },
    beforeDestroy () {
        const that = this
        if(that.chart){
            that.chart.dispose()
            that.chart = null
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1366px){
    .pie {
        font-size: 12px;
    }
}
@media screen and (min-width: 1367px){
    .pie {
        font-size: 14px;
    }
}
</style>
